	<?php
		require_once("classes/MatrixColorsShapes.class.php");
		$matrix = new MatrixColorsShapes($_SESSION['shapeName']);
		$_SESSION['matrix'] = $matrix;
		//$matrix->debugMatrixList();
	?>
	<div id="page">
		<div id="left" class="centeredItem"></div>
		<div id="right" class="centeredItem"></div>
	</div>
    <div class="arrowsDiv">
    	<img src="img/arrow-left.png" alt="gauche" /><img src="img/arrow-right.png" alt="droite" />
    </div>
    <div id="chrono" class="invisible"></div>
    <div>
    	<span id="count"><?php echo $matrix->actualStep; ?></span>/<span id="allSteps"><?php echo $matrix->stepsNumber; ?></span>
    </div>
    <div class="invisible">
		<object type="application/x-shockwave-flash" data="music/dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">
			<param name="movie" value="music/dewplayer.swf" />
			<param name="flashvars" value="mp3=music/moods/<?php echo $_SESSION['gameSession']->getMoodMusic(); ?>&amp;autostart=1&amp;autoreplay=1"/>
			<param name="wmode" value="transparent" />
		</object>
    </div>
    <input type="hidden" value="" id="shapeName">
    <script language="javascript" src="js/Timer.class.js"></script>
	<script language="javascript" src="js/graphics.js"></script>
    <script language="javascript" src="js/ajaxLoader.js"></script>
    <script>
		document.onkeydown = manageKeyDown;
		ajaxLoad("getRandomColoredName",null,createShapeFromXHR);
		window.onbeforeunload = function(){if(getCount() < getStepsNumber()) return 'Quitter au milieu de la partie ? Vos résultats ne seront pas sauvegardés !';};
	</script>